
<template>
  <div class="detail">
  <detail-nav-bar class="detail-nav" @itemClick="itemClick" ref="nav"></detail-nav-bar>    <!-- 传递参数的时候，需要需要用-连接，不能出现大写，传递方法的时候，可以使用驼峰题 -->
   <scroll class="content" 
           ref="scroll" 
           @scroll="contentScroll" 
           :probe-type="3">
   <detail-swiper :top-images="topImages"></detail-swiper>
   <detail-base-info :goods="goods"></detail-base-info> 
   <detail-shop-info :shop="shop"></detail-shop-info>
   <detail-goods-info :detail-info="detailInfo" @imageLoad ="imageLoad"></detail-goods-info>
   <detail-param-info :param-info="paramInfo" ref="params"></detail-param-info>
   <detail-comment-info :comment-info="commentInfo" ref="comment"></detail-comment-info>
   <goods-list :goods="recommends"  ref="recommends"></goods-list> 
</scroll>
<back-top  @click.native="backClick" v-show="isShowBackTop"></back-top>      <!-- v-show="isShowBackTop" -->
<detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar> 
<toast :message="message" :isShow="isShow"></toast>
 </div>
</template>

<script>
import {getDetail, Goods , Shop, getRecommend} from '@/network/detail';//获取详情页网络请求

import DetailNavBar from './childCops/DetailNavBar';  //获取详情页导航栏组件
import DetailSwiper from './childCops/DetailSwiper';
import DetailBaseInfo from './childCops/DetailBaseInfo';
import DetailShopInfo from './childCops/DetailShopInfo';
import DetailGoodsInfo from './childCops/DetailGoodsInfo';
import DetailParamInfo from './childCops/DetailParamInfo';
import DetailCommentInfo from './childCops/DetailCommentInfo';
import DetailBottomBar from './childCops/DetailBottomBar';

import BackTop from '../../components/content/backtop/BackTop' 
import Scroll from '@/components/common/scroll/Scroll';
import GoodsList from '@/components/content/good/GoodsList';

import {itemListenerMixin,isShowBackTop} from '@/common/mixin' //导入混入中的代码
import {debounce} from '@/common/utils'

import Toast from '@/components/common/toast/Toast'

export default {
  name: "Detail",
  created() {},
  data() {
    return {
     iid:null,
     topImages:[],
     goods:{},
     shop:{},
     detailInfo:{},
     paramInfo:{},
     commentInfo:{},
     recommends:[],
     themeTopys:[],
     getThemeTopY:null,
     currentIndex:0,
    //  isShowBackTop:false,
    message:'',
    isShow:false
    };
  },
  components:{
  DetailNavBar,
  DetailSwiper,
  DetailBaseInfo,
  DetailShopInfo,
  Scroll,
  DetailGoodsInfo,
  DetailParamInfo,
  DetailCommentInfo,
  GoodsList,
  DetailBottomBar,
  BackTop,
  Toast

  },
  mixins:[itemListenerMixin,isShowBackTop],
  props: {},
  
  created() {

    this.iid=this.$route.params.iid
    // 获取iid详情请求数据
    getDetail(this.iid).then(res=>{

      const data = res.data.result
      // 获取轮播图图片信息
      this.topImages=data.itemInfo.topImages
      this.itemInfo = data.itemInfo
      // 获取商品信息
      this.goods =new Goods(data.itemInfo,data.columns,data.shopInfo.services)
      // 获取店铺信息
      this.shop =new Shop(data.shopInfo)
      // 保存商品详情数据
      this.detailInfo=data.detailInfo
      // console.log(this.detailInfo);
    // 获取商品参数
      this.paramInfo=data.itemParams  
          
//1、第一次获取，值不对原因this.$refs.params.$el还未渲染
      // this.themeTopys=[]
      // this.themeTopys.push(0)
      // this.themeTopys.push(this.$refs.params.$el.offsetTop)
      // this.themeTopys.push(this.$refs.comment.$el.offsetTop)
      // this.themeTopys.push(this.$refs.recommends.$el.offsetTop)
      // console.log(this.themeTopys);

//2、第二次获取，值不对原因，图片未加载
      // this.$nextTick(()=>{    //this.$nextTick,当页面加载完成后进行回调
      // //根据最新数据，Dom已经加载完了，但图片还没有加载完成
      // this.themeTopys=[]
      // this.themeTopys.push(0)
      // this.themeTopys.push(this.$refs.params.$el.offsetTop)
      // this.themeTopys.push(this.$refs.comment.$el.offsetTop)
      // this.themeTopys.push(this.$refs.recommends.$el.offsetTop)
      // console.log(this.themeTopys);
      // })
      this.getThemeTopY=debounce(()=>{
      this.themeTopys=[]
      this.themeTopys.push(0)
      this.themeTopys.push(this.$refs.params.$el.offsetTop)
      this.themeTopys.push(this.$refs.comment.$el.offsetTop)
      this.themeTopys.push(this.$refs.recommends.$el.offsetTop)
      this.themeTopys.push(Number.MAX_VALUE)  //Number.MAX_VALUE时js中可以输出的最大值
      },500)

      // 获取品论信息  
      if(data.rate.cRate !=0){
        this.commentInfo=data.rate.list[0]
      }
      
    }) 
    // 请求推荐数据
    getRecommend().then(res=>{
    this.recommends=res.data.data.list
   })
  },
mounted() {
  // console.log('我是详情中的数据');
},
  destroyed(){
this.$bus.$off('itemImgLoad',this.itemImgListener)  //页面销毁后，取消全局鉴定组件取消全局监听事件
  },
  methods: {
    imageLoad(){
      this.newRefresh()
      //3、第三次获取
      // this.$nextTick(()=>{    //this.$nextTick,当页面加载完成后进行回调
      //根据最新数据，Dom已经加载完了，但图片还没有加载完成
      this.getThemeTopY() 
  },
  itemClick(index){   //实现点击nav-bar直接滚动到对应页面
    this.$refs.scroll.scrollTo(0,-this.themeTopys[index],500)
  },
  contentScroll(position){
    // this.isShowBackTop=position.y<-500;
   const positionY = -position.y
   let length = this.themeTopys.length
   for(let i=0;i<length-1;i++){
     if(this.currentIndex !== i&&(positionY >=this.themeTopys[i]&&positionY<this.themeTopys[i+1])){
      this.currentIndex= i
      this.$refs.nav.currentIndex=this.currentIndex
     }
   }
  //  for(let i = 0;i<length;i++) {
  //   if(this.currentIndex!=i&&(i<length-1&&positionY>=this.themeTopys[i]&&positionY<this.themeTopys[i+1] ||(i===length-1&&positionY>=this.themeTopys[i]))){  //实现页面滚动时，nav中对应导航也被选中
  //     this.currentIndex= i
  //     this.$refs.nav.currentIndex=this.currentIndex
  //   }                                                                                                                                                                                                     
  //  }
 this.isShowBackTop=position.y<-1000;
  },
  addToCart(){
    const product={}
    product.image = this.topImages[0];
    product.title = this.goods.title;
    product.desc =this.goods.desc;
    product.iid=this.iid;
    product.price=this.goods.realPrice
    // console.log(product);
    this.$store.dispatch('addToCart',product).then(res=>{
//       this.addToCart(product).then(()=>{
//  this.$toast.show(res,2000)
//  console.log(this.$toast);
//       })
     
      this.message = res
      this.isShow = true
      setTimeout(()=>{
        this.message = ''
      this.isShow = false
      },2000)
      // console.log(res);
    })  //调用store中的action方法
  }
}
}
</script>

<style  scoped>
.detail{
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
   overflow: hidden;
  
}
 .detail-nav{
  position: relative;
  top: 0;
  z-index: 9;
 background-color: #fff;

}
 .content{
  background-color: #fff;
   height: calc(100% - 44px - 49px);
   overflow: hidden;
    /* position: absolute;
    top: 44px;
    bottom: 49px;
    right: 0;
    left: 0;  */
}

</style>